.container {
  .header {
    height: 46px;
    background: #4F7DE7;
  }


  .footer-submit {
    background: #FFF;
    box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.10);
    position: absolute;
    bottom: 0;
    height: 108px;
    width: 100%;
    z-index: 10;
    text-align: right;
    padding: 0 16px ;
  
    .footer-header {
      font-family: PingFangSC-Semibold;
      font-size: 12px;
      color: #525A6E;
  
      .footer-price {
        font-family: DINAlternate-Bold;
        font-size: 20px;
        color: #4F7DE7;
        margin-left: 5px;
      }
    }
    .footer-number {
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #AAADBA;
    }
  
    .footer-btn {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      
    }
  }
  
  .layouts {
    :global {
      .c7n-layout-footer {
        background: #FFF;
        box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.10);
        padding: 9px 24px;
      }
    }
    .content-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .content-footer-left {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #404040;
      }

      .content-footer-right {
        display: flex;
        align-items: center;
        .content-footer-desc {
          display: block;
          padding-right: 24px;
          .content-footer-desc-top {
            font-family: PingFangSC-Semibold;
            font-size: 12px;
            color: #525A6E;
            .content-footer-desc-top-price {
              font-family: DINAlternate-Bold;
              font-size: 20px;
              color: #4F7DE7;
              margin-left: 4px;
            }
          }
          .content-footer-desc-bottom {
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #AAADBA;
          }
          
        }
      }
    }
  }
  .right-header {
    display: flex;
    flex: 1;
    justify-content: space-between;

    .left-title {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #525A6E;
    }

    .left-icon {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #525A6E;

      img {
        height: 24px;
        width: 24px;
        margin-left: 16px;
      }
    }

    .right-btn {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .scale {
    padding: 16px 16px 0 16px;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #525A6E;
    box-shadow: 0 4px -2px  0 rgba(0,0,0,0.10);
    img {
      height: 24px;
      width: 24px;
      margin-left: 16px;
    }
  } 


  .content {
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
  }

  .pagination {
    text-align: right;
    padding: 16px;
    font-family: ArialMT;
    font-size: 12px;
    color: #666;
  }
 
}


.carts {
  margin: 16px;
  font-size: 14px;
  border-bottom: 1px solid #EEE;
  .cart-header {
    display: flex;
    flex: 1;
    justify-content: space-between;
    font-family: PingFangSC-Medium;
    color: #525A6E;
    padding: 8px 0 0 0;

    .cart-price {
      font-family: DINAlternate-Bold;
      font-size: 16px;
      color: #404040;
    }
  }

  .cart-content {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #B1B1B1;

    .cart-desc {
      display: flex;
      flex: 1;
      padding: 8px 0;
    }
  }

  .cart-footer {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #404040;
    display: flex;
    padding: 8px 0;

    .footer-left {
      flex: 1;
    }
    .footer-right {
      transform: translateY(-5px);
    }
  }
}

.stepper {
  font-size: 0;
  .minus, .plus {
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    background-color: #FDFDFD;
    border: 1px solid #D5DAE0;
    position: relative;
    vertical-align: middle;
    outline: none;
    cursor: pointer;

    &::before {
      width: 9px;
      height: 1px;
    }

    &::after {
      width: 1px;
      height: 9px;
    }

    &::before, &::after {
      content: '';
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #4F7DE7;
    }
  }

  .minus {
    border-radius: 2px 0 0 2px;

    &::after {
      display: none;
    }
  }

  .plus {
    border-radius: 0 2px 2px 0;
  }
  .input {
    width: 32px;
    height: 24px;
    padding: 1px;
    border: 1px solid #D5DAE0;
    border-width: 1px;
    border-radius: 0;
    box-sizing: border-box;
    color:  #404040;
    font-size: 12px;
    vertical-align: middle;
    // text-align: center;
    -webkit-appearance: none;
    outline: none;
    text-align: right;
    border-left: none;
    border-right: 0;
  }
}

.medical-show-circle {
  margin-right: 12px;
  margin-bottom: 30px;


  .medical-img {
    width: 216px;
    height: 148px;
    border-radius: 4px;
  }
  .medical-collect-img {
    height: 22px;
    width: 22px;
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 10;
  }
  .medical-name {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #525A6E;
    margin-top: 16px;
  }

  .medical-desc {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #B1B1B1;

    img {
      height: 12px;
      width: 12px;
    }

    span {
      margin-left: 4px;
    }
  }

  .medical-footer {
    display: flex;
    // justify-content: space-around;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    outline: none;

    .medical-add {
      border: none;
      background: #4F7DE7;
      border-radius: 2px;
      // color: white;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #FFF;

      img {
        height: 14px;
        width: 14px;
        margin-right: 2px;
      }
    }
  }
}

